
;(function () {
	 window.vm=new Vue({
    data:{
    	// todos:JSON.parse(window.localStorage.getItem("todos")||'[]'),
    	  todos: JSON.parse(window.localStorage.getItem('todos') || '[]'),
      // todos:[
      //   {id:1,title:"打游戏",completed:true},
      //   {id:2,title:"吃喝",completed:false},
      //   {id:3,title:"玩乐",completed:false}
      // ],
      msg:null,
      todo:null,
      todoText:""
    },
    computed:{
    	 // 该成员就是一个方法，但是在使用的时候必须当作属性来用，不能调用
      // 简写方式，一个函数，作为 get 方法
      // remaningCount () {
      //   console.log('remaningCount 属性方法被调用了')
      //   return this.todos.filter(t => !t.completed).length
      // }
    	todosLength:{
    			get(){
    			return	this.todos.filter(item=>!item.completed).length;
    			},
    			set(){
    				console.log("shu");
    			}
    	},
    	handTodosChecked:{
    		get(){
    			return this.todos.every(item=>item.completed);
    		},
    		set(){
    			// console.log(this.handTodosChecked)
    			const checked=!this.handTodosChecked;
    			this.todos.forEach(item=>{
    				item.completed=checked
    			})
    		}
    	},
    	todosShowText:{
    		get(){
    			switch(this.todoText){
    				case 'active':
    				return this.todos.filter(item=>!item.completed);
    				break;
    				case 'completed':
    				return this.todos.filter(item=>item.completed);
    				break;
    				default:
    				return this.todos;
    				break;
    			}
    		}
    	}
    },
    	watch:{
    		todos: {
        // 当监视到 todos 改变的时候会自动调用 handler 方法
        // 你监视的谁，val 就是谁
        // val 的变化之后的最新值
        // oldVal 是变化之前的值
        handler (val, oldVal) {
          // 监视到 todos 变化，把 todos 本次存储记录数据的状态
          // 这里既可以通过 this.todos 来访问，也可以通过 val 来得到最新的 todos
          window.localStorage.setItem('todos', JSON.stringify(val));
       console.log("jjj");
        },
        deep: true, // 深度监视，只有这样才能监视到数组或者对象孩子...孩子... 成员的改变
        // immediate: true // 无乱变化与否，你上来就给我调用一次，如何使用看需求
      }
    	},
    methods: {
      handleDel: function (index) {
//        console.log("ddd");
        this.todos.splice(index, 1);
      },
      handleNewTodo: function (e) {
//        console.log("jj")
        var value= e.target.value.trim();
        if(!value.length){
          return ;
        }
        // var todos=this.todos;
        const todos = this.todos
        todos.push({
          // 如果数组是空的就给 1 ，否则就是最后一个元素的 id + 1
          id: todos.length ? todos[todos.length - 1].id + 1 : 1,
          title: value,
          completed: false
        })
        // todos.push({
        //   id:ids,
        //   title:value,
        //   completed:false
        // });
             e.target.value="";
      },
      handleShowTodos(e){
    console.log(e.target.checked);
        this.todos.forEach(item=>{
          item.completed= e.target.checked;
        })
  },
  handleDbTodos(item){
//    console.log("jjj")
    this.msg=item;
  },
  handEditDotos(index,e){
    var value= e.target.value.trim();
    if(!value.length){
      this.todos.splice(index,1);
    }else{
      this.todos[index].title= e.target.value;
      this.msg="";
    }

  },
  handleEscTodos(){
    this.msg=null;
  },
  handAllTodos(){
    this.todos=this.todos.filter(item=> {return !item.completed})
  }
    },
    directives:{
    	'focus': {
    // bind (el, binding) {
    //   console.log(el)
    //   // el.focus()
    //   // 你在这里可以该样式等其它操作
    //   // 但是唯一不能做的就是聚焦
    //   // 聚焦不能写在 bind 钩子函数
    //   el.style.color = 'red'
    // }
    // 当被绑定的元素插入到 DOM 中时……
  	inserted:function(el){
  		el.focus();
  		}
	  },
	'todo-focus': {
		
    update (el, binding) {
      // console.log('todo-focus 指令所在模板更新了', el)
      // el.focus()
      console.log(binding.value) // currentEditing === item
      if (binding.value) {
        el.focus()
      }
    }
  }
    }
  }).$mount("#app")
	  ;
tt();
window.onhashchange=tt;
function tt(){
	// console.log(window.location.hash.substr(2))
	vm.todoText=window.location.hash.substr(2);

}
}

)()